<!--
 * @Descripttion:
 * @Version: 1.0
 * @Author: 何志龙
 * @Date: 2023-11-01 14:57:13
 * @LastEditors: 何志龙
 * @LastEditTime: 2023-12-01 12:06:42
-->
/** * @LastEditors: 何志龙 * @LastEditTime: 2023-11-01 15:00:00 * @Description: 重要组件 需要更改 请联系一下我 谢谢 */
<template>
  <div class="inputSelect" v-if="title">
    <!-- <p class="subTitle" v-if="IStitle">
      
    </p> -->
    <van-collapse v-model="activeNames1">
      <van-collapse-item name="1">
        <template #title>
          <p class="subTitle">
            <span class="line"></span> <span style="color: #3f8ffc">{{ title }}</span>
          </p>
        </template>
        <div v-if="isShowCity" class="cityCode">
          <!-- <SelectCity :contentData.sync="contentDataCity" :JFData.sync="JFData" /> -->
          <div v-for="(item, index) in contentDataCity" :key="index">
            <selectPicker
              v-if="!item.isshow"
              :isTime="false"
              :keys="item.key"
              :bitian="item.required"
              :ISrequired="disable ? true : !item.readonly"
              :values="'cityname'"
              :DICID="'citycode'"
              :placeholder="item.label"
              :columns="item.NYDARR"
              :labels="item.label"
              :selectValue="JFData[0][item.key] | inUseName1(item.NYDARR)"
              @getMessage="setValueCity">
            </selectPicker>
          </div>
        </div>
        <div v-for="(item, index) in contentData">
          <!-- 是否需要市区县 -->
          <van-field
            style="border-bottom: 1px solid rgb(210, 210, 210)"
            v-if="item.ISinput && item.label"
            :type="item.types"
            :required="item.required"
            :placeholder="'请输入' + item.label"
            :readonly="disable ? true : !item.readonly"
            v-model="JFData[0][item.key]"
            :label="item.label">
            <template #button v-if="item.buttonTest">
              <van-button size="small" type="primary" @click="getButton1(item)">{{ item.buttonTest }}</van-button>
            </template>
          </van-field>
          <selectPicker
            v-if="item.isTime && item.label"
            :isTime="true"
            :ISrequired="disable ? true : !item.readonly"
            :bitian="item.required"
            :labels="item.label"
            :keys="item.key"
            :placeholder="'请选择'"
            :selectValue="JFData[0][item.key]"
            @getMessage="setValue"></selectPicker>
          <selectPicker
            v-else-if="!item.isDanDuan && !item.ISinput && !item.isTime && !item.isOtherSealf && item.label"
            :isTime="false"
            :keys="item.key"
            :buttonTest="item.buttonTest"
            :bitian="item.required"
            :ISrequired="disable ? true : !item.readonly"
            :values="'DICNAME'"
            :DICID="'DICID'"
            :placeholder="item.label"
            :columns="item.NYDARR"
            :labels="item.label"
            :selectValue="JFData[0][item.key] | inUseName(item.NYDARR)"
            @getMessage="setValue1"
            @getButton="getButton">
          </selectPicker>
          <selectPicker
            v-else-if="item.isOtherSealf && item.label"
            :isTime="false"
            :keys="item.key"
            :buttonTest="item.buttonTest"
            :bitian="item.required"
            :ISrequired="disable ? true : !item.readonly"
            :values="'GHQVALUE'"
            :DICID="'GHQKEY'"
            :placeholder="item.label"
            :columns="item.NYDARR"
            :labels="item.label"
            :selectValue="JFData[0][item.key] | inUseName2(item.NYDARR)"
            @getMessage="setValue1"
            @getButton="getButton">
          </selectPicker>
          <div style="border-bottom: 1px solid #9b9b9b" v-else-if="item.isDanDuan">
            <span
              v-if="item.label"
              style="width: 60%;display: color:#000; font-weight: bold; inline-block;padding-left: 8px;line-height: 36px;font-size: 14px;"
              :style="{ paddingLeft: item.required ? '8px' : '16px' }">
              <span v-show="item.required" style="color: red">*</span>
              {{ item.label }}</span
            >
            <span style="padding-top: 4px; color: #000; font-weight: bold">
              <van-radio-group v-model="JFData[0][item.key]" direction="horizontal" @change="radioChange">
                <van-radio style="margin-bottom: 5px; font-size: 14px" v-for="(item2, index2) in item.children" :key="index2 + 'childrens'" :name="item2.value">{{ item2.name }} </van-radio>
              </van-radio-group>
            </span>
          </div>
        </div>
      </van-collapse-item>
    </van-collapse>
  </div>
  <div class="inputSelect" v-else>
    <div v-if="isShowCity" class="cityCode">
      <!-- <SelectCity :contentData.sync="contentDataCity" :JFData.sync="JFData" /> -->
      <div v-for="(item, index) in contentDataCity" :key="index">
        <selectPicker
          v-if="!item.isshow"
          :isTime="false"
          :keys="item.key"
          :bitian="item.required"
          :ISrequired="disable ? true : !item.readonly"
          :values="'cityname'"
          :DICID="'citycode'"
          :placeholder="item.label"
          :columns="item.NYDARR"
          :labels="item.label"
          :selectValue="JFData[0][item.key] | inUseName1(item.NYDARR)"
          @getMessage="setValueCity"></selectPicker>
      </div>
    </div>
    <div v-for="(item, index) in contentData">
      <!-- 是否需要市区县 -->
      <van-field
        style="border-bottom: 1px solid rgb(210, 210, 210)"
        v-if="item.ISinput&& item.label"
        :required="item.required"
        :type="item.types"
        :placeholder="'请输入' + item.label"
        :readonly="disable ? true : !item.readonly"
        v-model="JFData[0][item.key]"
        :label="item.label">
        <template #button v-if="item.buttonTest">
          <van-button size="small" type="primary" @click="getButton1(item)">{{ item.buttonTest }}</van-button>
        </template>
      </van-field>
      <selectPicker
        v-if="item.isTime&& item.label"
        :isTime="true"
        :ISrequired="disable ? true : !item.readonly"
        :bitian="item.required"
        :labels="item.label"
        :keys="item.key"
        :placeholder="'请选择'"
        :selectValue="JFData[0][item.key]"
        @getMessage="setValue"></selectPicker>
      <selectPicker
        v-else-if="!item.isDanDuan && !item.ISinput && !item.isTime && !item.isOtherSealf && item.label"
        :isTime="false"
        :keys="item.key"
        :bitian="item.required"
        :buttonTest="item.buttonTest"
        :ISrequired="disable ? true : !item.readonly"
        :values="'DICNAME'"
        :DICID="'DICID'"
        :placeholder="item.label"
        :columns="item.NYDARR"
        :labels="item.label"
        :selectValue="JFData[0][item.key] | inUseName(item.NYDARR)"
        @getMessage="setValue1"
        @getButton="getButton">
      </selectPicker>

      <selectPicker
        v-else-if="item.isOtherSealf&& item.label"
        :isTime="false"
        :keys="item.key"
        :buttonTest="item.buttonTest"
        :bitian="item.required"
        :ISrequired="disable ? true : !item.readonly"
        :values="'GHQVALUE'"
        :DICID="'GHQKEY'"
        :placeholder="item.label"
        :columns="item.NYDARR"
        :labels="item.label"
        :selectValue="JFData[0][item.key] | inUseName2(item.NYDARR)"
        @getMessage="setValue1"
        @getButton="getButton">
      </selectPicker>
      <div style="border-bottom: 1px solid #9b9b9b" v-else-if="item.isDanDuan">
        <span
          v-if="item.label"
          style="width: 60%;display: color:#000; font-weight: bold; inline-block;padding-left: 8px;line-height: 36px;font-size: 14px;"
          :style="{ paddingLeft: item.required ? '8px' : '16px' }">
          <span v-show="item.required" style="color: red">*</span>
          {{ item.label }}</span
        >
        <span style="padding-top: 4px; color: #000; font-weight: bold">
          <van-radio-group v-model="JFData[0][item.key]" direction="horizontal" @change="radioChange">
            <van-radio style="margin-bottom: 5px; font-size: 14px" v-for="(item2, index2) in item.children" :key="index2 + 'childrens'" :name="item2.value">{{ item2.name }} </van-radio>
          </van-radio-group>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
// import SelectCity from './SelectCity.vue'
import selectPicker from '@/utils/selectPicker'
import { getDatalistForTree, FileServerProxy } from '@/utils/api'
export default {
  filters: {
    inUseName1: function (msg, data) {
      try {
        let name = ''
        data.forEach((item) => {
          if (item.citycode == msg) {
            name = item.cityname
          }
        })
        return name
      } catch (err) {
      }
    },
    inUseName: function (msg, data) {
      try {
        let name = ''
        data.forEach((item) => {
          if (item.DICID == msg) {
            name = item.DICNAME
          }
        })
        return name
      } catch (err) {
      }
    },
    inUseName2: function (msg, data) {
      try {
        let name = ''
        data.forEach((item) => {
          if (item.GHQKEY == msg) {
            name = item.GHQVALUE
          }
        })
        return name
      } catch (err) {
      }
    }
  },
  data() {
    return {
      activeNames1: ['1']
    }
  },
  props: {
    //该字段有值的时候输入框和下拉框不可编辑
    ISDanxuan: {
      typeof: Boolean,
      default: false
    },
    isUpperCase: {
      typeof: Boolean,
      default: true
    },
    IStitle: {
      typeof: Boolean,
      default: true
    },
    ISDuoXuan: {
      typeof: Boolean,
      default: false
    },
    disable: {
      typeof: String,
      default: ''
    },
    isShowCity: {
      typeof: Boolean,
      default: false
    },
    title: {
      typeof: String,
      default: '申请户主信息'
    },
    contentData: {
      typeof: Array,
      default: function () {
        return [
          {
            label: '输入',
            key: 'XCSJ1', //绑定的字段
            ISinput: true, //true:输入框
            required: true, //true: 必填项
            readonly: true, //true:可以填写 false：不可以填写
            isTime: false //true:可以时间选择器 false：下拉框
          },
          {
            label: '下拉',
            key: 'XCSJ2',
            ISinput: false,
            required: true,
            readonly: true,
            isTime: false,
            emitData: 'a8e5782d-9a59-48e4-b35b-654b9bb667ca',
            NYDARR: []
          },
          {
            label: '下拉2',
            key: 'XCSJ4',
            ISinput: false,
            required: true,
            readonly: true,
            isTime: false,
            emitData: '2c478392-9c1b-40da-b941-41e4b8c9d6d3',
            NYDARR: []
          },
          {
            label: '时间',
            key: 'XCSJ3',
            required: true,
            ISinput: false,
            readonly: true,
            isTime: true
          }
        ]
      }
    },
    JFData: {
      typeof: Array,
      default: function () {
        return [
          {
            XCSJ1: '',
            XCSJ2: '',
            XCSJ3: '',
            XCSJ4: '',
            SSS: '',
            SSX: '',
            SSZ: '',
            SSC: ''
          }
        ]
      }
    },
    contentDataCity: {
      typeof: Array,
      default: function () {
        return [
          {
            label: '所属市',
            key: 'CITY', //绑定的字段
            ISinput: true, //true:输入框
            required: true, //true: 必填项
            readonly: false, //true:可以填写 false：不可以填写
            NYDARR: []
          },
          {
            label: '所属县(区)',
            key: 'COUNTY', //绑定的字段
            ISinput: true, //true:输入框
            required: true, //true: 必填项
            readonly: false, //true:可以填写 false：不可以填写
            NYDARR: []
          },
          {
            label: '所属镇',
            key: 'TOWN', //绑定的字段
            ISinput: true, //true:输入框
            required: true, //true: 必填项
            readonly: false, //true:可以填写 false：不可以填写
            NYDARR: []
          },
          {
            label: '所属村',
            key: 'VILLAGE', //绑定的字段
            ISinput: true, //true:输入框
            required: true, //true: 必填项
            readonly: false, //true:可以填写 false：不可以填写
            NYDARR: []
          }
        ]
      }
    }
  },
  created() {
    //将contentData中的key全部转成大写
    if (this.isUpperCase) {
      this.contentData.forEach((item) => {
        item.key = item.key.toUpperCase()
      })
    }
    if (this.isShowCity) {
      this.getCityOpenDataView('330000000000', 'CITY')
    }
    //回显城市
    if (this.JFData[0].COUNTY) {
      this.getCityOpenDataView(this.JFData[0].CITY, 'COUNTY')
    }
    if (this.JFData[0].TOWN) {
      this.getCityOpenDataView(this.JFData[0].COUNTY, 'TOWN')
    }
    if (this.JFData[0].VILLAGE) {
      this.getCityOpenDataView(this.JFData[0].TOWN, 'VILLAGE')
    }
    //获取枚举值
    this.getEnum()
  },
  methods: {
    setValue1(name, val, label, key) {
      /**
       * name: 需要展示的name
       *  val： 选择的id值
       * lable ： 当前输入框的lable
       * key ： 需要赋值的key
       */
      this.JFData[0][key] = val
      this.$emit('update:JFData', this.JFData)
      this.$emit('getValues', name, val, label, key)
    },
    //必填项判断
    bitian1(){
      let index = 0
      this.contentData.forEach((item,index1)=>{
        for(let i in this.JFData[0]){
          if(item.label&&item.required&&item.key == i){
            if(!this.JFData[0][i]||this.JFData[0][i].toString().trim() === ''){
              index++
            }
          }
        }
      })
      if(index>0){
        //提示还有必填项未填写
      } else{
        //可以提交
      }
      return index
    },
    getButton1(data) {
      this.$emit('getButton1', data)
    },
    radioChange(name) {
      //需要根据房屋审批情况和安全管理情况来自动赋值给初步判断
    },
    getButton(name, val, key) {
      this.$emit('getButtons', name, val, key)
    },
    setValue(name, val, key) {
      /**
       * name ： 选择的值
       * val ： 当前输入框的value
       * key ： 需要赋值的key
       */
      this.JFData[0][key] = name
      this.$emit('update:JFData', this.JFData)
      this.$emit('getValues', name, val, key)
    },
    setValueCity(name, val, label, key) {
      this.$emit('update:JFData', this.JFData)
      this.$emit('getValues', name, val, label, key)
      this.JFData[0][key] = val
      if (label == '所属市') {
        key = 'COUNTY'
        this.getCityOpenDataView(val, key)
      } else if (label == '所属县(区)') {
        key = 'TOWN'
        this.getCityOpenDataView(val, key)
      } else if (label == '所属镇') {
        key = 'VILLAGE'
        this.getCityOpenDataView(val, key)
      }
    },
    getCityOpenDataView: async function (data, key) {
      const res = await getDatalistForTree(data)
      
      this.contentDataCity.forEach((item) => {
        if (item.key == key) {
          item.NYDARR = []
          item.NYDARR.push(...res.data.data)
        }
      })
      
    },
    //获取枚举数据.em.emitData
    getEnum() {
      this.contentData.forEach(async (item) => {
        if (item.emitData) {
          let params = {
            accessCode: '688bd3883572440a859dfd8ba9194e7b',
            cityCode: window.localStorage.getItem('citycode') ? window.localStorage.getItem('citycode') : '441300000000',
            params: {
              dataguid: item.emitData,
              searchObject: JSON.stringify([]),
              token: window.localStorage.getItem('token')
            }
          }
          const res = await FileServerProxy(params)
          let newData = JSON.parse(res.data.data).Data
          if(item.NYDARR.length > 0){
            return
          }
          item.NYDARR.push(...newData)
        } else {
        }
      })
    }
  },
  components: {
    selectPicker
    // SelectCity
  }
}
</script>

<style lang="scss">
.inputSelect .van-field__label {
  color: black;
  font-weight: bold !important;
  font-size: 13px !important;
  width: 8em;
}

.inputSelect .van-field__control {
  text-align: right;
}

.inputSelect .van-radio--horizontal {
  margin-right: 30px;
}

.inputSelect .van-collapse-item__content {
  padding: 6px;
  color: black;
}

.inputSelect .el-table th.el-table__cell > .cell {
  color: black;
}
.inputSelect .subTitle {
  width: 100%;
  //   height: 40px;
  //   line-height: 40px;
  font-size: 14px;
  position: relative;
  display: flex;
  align-items: center;
  //   border-bottom: 1px solid #9b9b9b;
  padding-left: 4px;
  .line {
    width: 6px;
    height: 26px;
    background: #3f8ffc;
    display: inline-block;
    margin-right: 10px;
  }
}
</style>

<style>
.inputSelect .van-radio-group--horizontal {
  padding-left: 8px !important;
}
.inputSelect .van-collapse-item__title {
  border-bottom: 1px solid #9b9b9b;
}
</style>
